import React, { PureComponent, Fragment } from '@/pages/auth/node_modules/react';
import { Transfer, Table } from '@/pages/auth/node_modules/antd';
import { connect } from '@/pages/auth/node_modules/dva';
import difference from '@/pages/auth/node_modules/lodash/difference';

const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
    <Transfer {...restProps} showSelectAll={false}>
      {({
        direction,
        filteredItems,
        onItemSelectAll,
        onItemSelect,
        selectedKeys: listSelectedKeys,
        disabled: listDisabled,
      }) => {
        const columns = direction === 'left' ? leftColumns : rightColumns;
  
        const rowSelection = {
          getCheckboxProps: item => ({ disabled: listDisabled || item.disabled }),
          onSelectAll(selected, selectedRows) {
            const treeSelectedKeys = selectedRows
              .filter(item => !item.disabled)
              .map(({ key }) => key);
            const diffKeys = selected
              ? difference(treeSelectedKeys, listSelectedKeys)
              : difference(listSelectedKeys, treeSelectedKeys);
            onItemSelectAll(diffKeys, selected);
          },
          onSelect({ key }, selected) {

            onItemSelect(key, selected);
          },
          selectedRowKeys: listSelectedKeys,
        };
  
        return (
          <Table
            rowSelection={rowSelection}
            columns={columns}
            dataSource={filteredItems}
            size="small"
           // style={{ pointerEvents: listDisabled ? 'none' : null }}
            onRow={({ key, disabled: itemDisabled }) => ({
              onClick: () => {
                if (itemDisabled || listDisabled) return;
                onItemSelect(key, !listSelectedKeys.includes(key));
              },
            })}
          />
        );
      }}
    </Transfer>
  );
    
  const leftTableColumns = [
    {
      dataIndex: 'name',
      title: '用户名称',
    },
    {
      dataIndex: 'orgName',
      title: '组织',
    },
    {
        dataIndex: 'stationName',
        title: '岗位',
    },
  ];
  const rightTableColumns = [
    {
      dataIndex: 'name',
      title: '用户名称',
    },
  ];
  @connect(({ authRole, loading }) => ({
    authRole,
    loading: loading.models.authRole,
  }))
  class AuthTransfer extends PureComponent {
    componentDidMount(){
        const { dispatch,roleId } = this.props;
        dispatch({
            type: 'authRole/userFetch',
            payload:{
                pageNo:1,
                pageSize:100000
            }
        });
        dispatch({
            type: 'authRole/setUserRole',
            payload:{
                roleId:roleId
            },
            callback: (result) => {
                if(result.code==0){
                  dispatch({
                    type: 'authRole/common',
                    payload:{
                        targetKeys:result.data 
                    }
                  });
                }else{
                  message.warn(result.msg)
                }
              },
        });
    }
    onChange = (targetKeys, direction, moveKeys) => {
      const {dispatch}=this.props;
      dispatch({
        type: 'authRole/common',
        payload:{
            targetKeys:targetKeys
        }
      });
    };
  
    render() {
      const {
          authRole: {
              userData,
              targetKeys
          },
          loading,
      } = this.props;
      const { list = [], pagination } = userData;
      return (
        <div>
          <TableTransfer
            rowKey={record => record.userId}
            dataSource={list}
            targetKeys={targetKeys}
            showSearch
            onChange={this.onChange}
            filterOption={(inputValue, item) =>{
                item.name=item.name||""
                item.orgName=item.orgName||""
                item.stationName=item.stationName||""
                return item.name.indexOf(inputValue) !== -1 || item.orgName.indexOf(inputValue) !== -1|| item.stationName.indexOf(inputValue) !== -1
            }}
            leftColumns={leftTableColumns}
            rightColumns={rightTableColumns}
          />
        </div>
      );
    }
  }

  export default AuthTransfer;